<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Foot</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/foot.css">
</head>
<body>
<div class="main">
    <!--  标题  -->
    <div class="title">
        Our Awesome Crew
    </div>
    <div class="desc">
        Our unique online teaching style makes learning easy for everyone.Whether you are trying to land a new job, brush up on your skills.
    </div>
    <div class="img-text">
        <div class="text">
            <div class="bgd">
                <div class="text-title">
                    Ethan Dutton
                </div>
                <div class="text-desc">
                    SENIOR VISUAL DESINCER
                </div>
                <div class="img">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                </div>
            </div>
        </div>
        <div class="text">
            <div class="bgd">
                <div class="text-title">
                    Ethan Dutton
                </div>
                <div class="text-desc">
                    SENIOR VISUAL DESINCER
                </div>
                <div class="img">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                </div>
            </div>
        </div>
        <div class="text">
            <div class="bgd">
                <div class="text-title">
                    Ethan Dutton
                </div>
                <div class="text-desc">
                    SENIOR VISUAL DESINCER
                </div>
                <div class="img">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                </div>
            </div>
        </div>
        <div class="text">
            <div class="bgd">
                <div class="text-title">
                    Ethan Dutton
                </div>
                <div class="text-desc">
                    SENIOR VISUAL DESINCER
                </div>
                <div class="img">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                    <img src="./img/Facebook%20Icon.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var text = document.getElementsByClassName("text")

    for(let i in text) {
        mouse(text[i], 0)
    }

    function mouse(dom, index) {
        dom.onmouseover = function () {
            let getFirstChild = this.children[index];
            getFirstChild.style.display = 'block'
        }

        dom.onmouseout = function () {
            let getFirstChild = this.children[index];
            getFirstChild.style.display = 'none'
        }
    }

</script>
</body>
</html>